{extend name="base" /} {block name="css"}
<link rel="stylesheet" href="__CSS__/custom.css">
<link rel="stylesheet" href="__CSS__/monitor.css"> {/block} {block name="js"}
<script src="__JS__/monitor/chatMethods.js"></script>
<script src="__JS__/monitor/chatMain.js"></script> {/block} {block name="body"}
<div id="loading"></div>
<div id="customList">
    <div id="dialog" style="width: 100%;height:100%;">
        <div style="background: url('/static/images/tips.jpg') no-repeat;background-size:100% 100%;width:100%;height:100%;" v-if="chatLog.length == 0"></div>
        <div class="dialog-box">
            <div v-for="items in chatLog">
                <div class="dialog-left" v-if="items.send_type == 1001">
                    <template v-if="items.type == 'subscribe'">
                        <div class="subscribe">
                            <span>{{userInfo.nickname}} {{items.send_time | formatDate}} 关注</span>
                        </div>
                    </template>
                    <template v-else-if="items.type == 'unsubscribe'">
                        <div class="subscribe">
                            <span>{{userInfo.nickname}} {{items.send_time | formatDate}} 取消关注</span>
                        </div>
                    </template>
                    <template v-else>
                        <div class="user-header">
                            <img :src='userInfo.headimgurl' alt="">
                        </div>
                        <div class="user-msg">
                            <div class="top">
                                <span class="user-nickname">{{userInfo.nickname}}</span>
                                <span class="send-time">{{items.send_time | formatDate}}</span>
                            </div>
                            <div class="text">
                                <span v-if="items.type == 'voice'" class="content">
                                    <audio controls="controls">
                                        <source :src="items.content" type="audio/mpeg" />
                                    </audio>
                                </span>
                                <span v-if="items.type == 'video'" class="content">
                                    <video width="320" height="240" controls>
                                        <source :src="items.content | jsonParse(1)" type="video/mp4" />
                                    </video>
                                </span>
                                <span v-if="items.type == 'image'" class="content">
                                    <img width="200px;" :src="items.content" alt="">
                                </span>
                                <span v-if="items.type == 'text'" class="content">{{items.content}}</span>
                            </div>
                        </div>
                    </template>
                </div>
                <div class="dialog-right" v-if="items.send_type == 1002">
                    <div class="cs-msg">
                        <div class="top">
                            <span class="cs-nickname">{{customerService.nickname}}</span>
                            <span class="send-time">{{items.send_time | formatDate}}</span>
                        </div>
                        <div class="text">
                            <span v-if="items.type == 'image'" class="content">
                                <img width="200px;" :src="items.content" alt="">
                            </span>
                            <span v-if="items.type == 'text'" class="content">{{items.content}}</span>
                        </div>
                    </div>
                    <div class="cs-header">
                        <img :src="customerService.header_url" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-body">
        <div style="padding: 30px 30px 30px 0px;" class="mdui-theme-primary-Grey mdui-theme-accent-Grey">
            <!-- 客服列表 -->
            <div id="example1-tab1" class="mdui-p-a-2">
                <div class="mdui-table-fluid">
                    <table class="mdui-table">
                        <thead class="mdui-color-orange-200">
                            <tr>
                                <th class="mdui-text-color-black-text">昵称</th>
                                <th class="mdui-text-color-black-text">关注时间</th>
                                <th class="mdui-text-color-black-text">是否关注</th>
                                <th class="mdui-text-color-black-text">初次对话时间</th>
                                <th class="mdui-text-color-black-text">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in usersList">
                                <td>{{item.nickname}}</td>
                                <td>{{item.subscribe_time | formatDate}}</td>
                                <td>{{item.subscribe ? '已关注' : '取消关注'}}</td>
                                <td>{{item.create_butt_time | formatDate}}</td>
                                <td>
                                    <button id="open" v-on:click="openDialog(item);" class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-theme-accent mdui-ripple mdui-color-blue mdui-text-color-white-text">查看聊天</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                </div>
                <div class="iPages" id="pages01"></div>
            </div>
        </div>
    </div>
</div>
{/block}